<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src=js/vue.js></script>
    <script src=js/axios-0.18.0.js></script>
</head>
<body>
<!--    进入页面，查询指定学生信息，并且展示-->
    <div id="app">
        number: <input type="text" name="number" v-model="stu.number"> <br>
        name: <input type="text" name="name" v-model="stu.name"> <br>
        birthday: <input type="text" name="birthday" v-model="stu.birthday"> <br>
        address: <input type="text" name="address" v-model="stu.address"> <br>

        <button @click="update">更新</button>
    </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            stu:{
                number:"",
                name:"",
                birthday:"",
                address:""
            }
        },
        methods:{
            update(){
                let loc = "/stu/test";
                let stu = this.stu;

                let stuParams = {
                    number:"abc",
                    name:"lisi",
                    birthday:"2012-12-12",
                    address:"hz"
                }

                axios({
                    //url键请求的路径
                    url: loc,
                    //请求方式
                    method:"post",
                    //params携带参数，向后台传递时，以key=value&key2=value2...形式
                    params: stuParams,
                    //data携带参数，向后端传递时，以json格式字符串传递的，后端接收需要通过@RequestBody标识
                    data: stu,
                    //headers携带头信息
                    headers:{
                        token:"abcdef"
                    }
                }).then(resp=>{
                    let r = resp.data;
                    alert(r.msg)
                });
            }
        },

        mounted(){
            let number = "qf001";
            let url = "/stu/"+number;
            axios.get(url)
                .then(resp=>{
                    let r = resp.data;
                    let stu = r.data;

                    this.stu = stu;
                });
        }
    });
</script>
</html>